import React from "react";
import { BrowserRouter as Router, Route, Switch, NavLink } from "react-router-dom";
import "./less/base.less"
import NotFound from "./components/NotFound"// 404 页面

import BaseList from './pages/base/baseList';
import RouterList from './pages/router/routerList';
import ReduxList from './pages/redux/reduxList';
class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Router>
          <h1>REACT 大类</h1>
          <ul className="nav1">
            <li><NavLink activeClassName="selected" exact to="/base">REACT 基础</NavLink></li>
            <li><NavLink activeClassName="selected" to="/router">REACT 路由</NavLink></li>
            <li><NavLink activeClassName="selected" to="/redux">Redux 状态管理</NavLink></li>
          </ul>
          <hr />
          <Switch>
            <Route path="/base" component={BaseList}></Route>
            <Route path="/router" component={RouterList}></Route>
            <Route path="/redux" component={ReduxList}></Route>
            
            <Route component={NotFound}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;
